<script>
// import { selectUserMenu } from '@/api/authApi'
import { useAuthStore } from '@/stores/authStore'
import { ArrowDown } from '@element-plus/icons-vue'
import { mapWritableState, mapActions } from 'pinia'

export default {
  components: {
    ArrowDown,
  },
  data() {
    return {
      // menus: [],
    }
  },
  computed: {
    ...mapWritableState(useAuthStore, ['currentUser', 'token', 'menus', 'activeTitle']),
  },
  methods: {
    ...mapActions(useAuthStore, ['clearStore']),
    loginOut() {
      //重置本地缓存和仓库状态
      // this.currentUser = null
      // this.token = null
      // this.menus = []
      this.clearStore()
      this.$router.push({
        name: 'login',
      })
    },
    //   async initMenus() {
    //     this.menus = await selectUserMenu()
    // },
  },
  // created() {
  //   this.initMenus()
  // },
}
</script>

<template>
  <el-container class="home-box">
    <el-header>
      <div class="logo">
        <img src="@/assets/img/logo.png" alt="" srcset="" />
        <span>教务管理系统</span>
      </div>
      <el-dropdown>
        <span class="el-dropdown-link">
          <img src="@/assets/img/user.jpg" alt="" srcset="" />
          {{ currentUser?.username ?? '' }}
          <el-icon class="el-icon--right">
            <ArrowDown></ArrowDown>
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="loginOut()">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-header>
    <el-container>
      <el-aside width="250px">
        <el-menu
          background-color="#324157"
          text-color="#ffffff"
          router
          :default-active="$route.path"
        >
          <el-menu-item
            v-for="m in menus"
            :key="m.right_id"
            :index="m.right_path"
            @click="activeTitle = m.right_name"
          >
            <el-icon v-html="m.right_icon"></el-icon>
            <span>{{ m.right_name }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <el-card>
          <template #header>
            <span>{{ activeTitle }}</span>
          </template>
          <RouterView></RouterView>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.home-box {
  height: 100%;
}
.el-header {
  background-color: #242f42;
  color: white;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.logo {
  height: 100%;
}
.logo img {
  height: 100%;
  transform: scale(0.8);
  border-radius: 10px;
  vertical-align: middle;
}
.logo span {
  font-size: 20px;
  vertical-align: middle;
}
.el-dropdown {
  height: 100%;
  cursor: pointer;
}
.el-dropdown :deep(.el-dropdown-link) {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  color: white;
}
.el-dropdown :deep(.el-dropdown-link:focus-visible) {
  outline: none;
}
.el-dropdown img {
  height: 100%;
  transform: scale(0.8);
  border-radius: 50%;
}
.el-aside {
  background-color: #324157;
  color: white;
}
.el-menu-item.is-active :deep(svg *) {
  stroke: #409eff;
}
.el-card {
  height: 100%;
  box-sizing: border-box;
}
</style>
